<link href="/assets/home/css/mui/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/home/css/recharge.css">

<header class="mui-bar mui-bar-nav" style="position: sticky;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">充值</h1>
</header>
<form class="mui-input-group ">
    <div class="mui-input-row">
        <label>充值账户：</label>
        <input type="text" class="mui-input-clear" placeholder="请输入手机号" value="{$LoginAuth['mobile']}" />
    </div>
</form>
<!--充值金额-->
<form action="" method="post">
    <div class="money_box">
        <h1>选择充值金额&nbsp;&nbsp;&nbsp;&nbsp;<span>（100起充）</span></h1>
        <div>
            <div class="money">100</div>
            <div class="money">200</div>
            <div class="money">500</div>
            <div class="money">1000</div>
        </div>

    </div>
    <div>当前余额还有<span id="myMoney">{$LoginAuth['money']}</span></div>

    <!--立即充值-->
    <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">立即充值</button>

</form>
<script>
    $money = 500;
    //选择金额，改变所选金额样式
    $(".money").click(
        function () {
            $money = $(this)[0].innerText
            $(".money_box input").css("border", "1px solid #ccc");
            $(this).addClass("choose").siblings().removeClass("choose");
            $(".setmeal_box").hide();

        }
    )
    //选择其他金额，显示金额输入框
    $(".money_box input").click(
        function () {
            $money = $(this).val();
            // console.log($(this));
            $(this).css("border", "1px solid #01aff0");
            $(this).siblings().removeClass("choose");
            $(".setmeal_box").show();
            $(".money_box input").show();
        }
    )

    $("button").click(function () {
        $.ajax({
            type: "post",
            url: ``,
            data: {
                money: $money
            },
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {
                    $("#myMoney").text(res.data)
                    mui.toast(res.msg)
                } else {
                    mui.toast(res.msg)
                }
                // location.reload();
                return false
            }

        })
    })
</script>